<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    tbody .layui-table-cell {
      height: 37px
    }

    #pc_add_out {
      display: none;
    }

    #pc_change_out {
      display: none;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"></i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">产品管理</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>产品展示</cite></a>
      </span>
    </div>
    <!-- 表格 -->
    <div class="layui-card-body">
      <table class="layui-table " lay-even lay-skin="row " id="goods_classify_list" lay-size="	lg ">
      </table>
    </div>
  </div>



  <!-- 添加的弹出层 -->
  <div id="pc_add_out">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-inline">
          <input type="text" name="pc_name" required lay-verify="required" placeholder="请输入轮播图名称" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">分类排序</label>
        <div class="layui-input-inline">
          <input type="number" name="pc_sort" required lay-verify="required|number" placeholder="请输入轮播排序"
            autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="pcAddForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 添加的修改层 -->
  <div id="pc_change_out">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <input type="hidden" name="pc_id" id="update_pc_id">
        <div class="layui-input-inline">
          <input type="text" name="pc_name" required lay-verify="required" id="update_pc_name" autocomplete="off"
            class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">分类排序</label>
        <div class="layui-input-inline">
          <input type="number" name="pc_sort" id="update_pc_sort" required lay-verify="required|number"
            autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="pcUpdateForm">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<!-- 表格上方操作 -->
<script type="text/html" id="banner_list_top">
  <div>

    <span type="button" class="layui-btn layui-btn-danger" onclick="pc_delete_all()" style="margin-right: 10x;"><i
        class="layui-icon layui-icon-delete"></i>批量删除</span>
    <span type="button" class="layui-btn layui-btn-normal" onclick="pc_add()" style=" margin-right: 20px;"><i
        class="layui-icon layui-icon-add-1"></i>添加</span>
    <div class=" layui-input-inline">
      <!-- 搜索当成表单来做就好了 -->
      <!-- <button lay-submit lay-filter="*">提交</button>     -->
      <input type="text" name="search" placeholder="请输入导航名称" id="search_input" autocomplete="off" class="layui-input">
    </div>
    <button type="button" lay-submit lay-filter="search" id="search_button" class=" layui-btn"><i
        class="layui-icon layui-icon-search"></i>
      查询</button>
  </div>
</script>
<!-- 操作模块 -->
<script type="text/html" id="operation">
  <button type="button" onclick="updateAllPC('{{d.pc_id}}')" class="layui-btn layui-btn-xs layui-btn-warm">修改</button>
  <button type="button" class="layui-btn  layui-btn-xs layui-btn-danger" onclick="deletePC('{{d.pc_id}}')">删除</button></div>
</script>
<!-- 轮播图排序 -->
<script type="text/html" id="banner_sort_list">
  <div>
    <input type="text" class="layui-input" autocomplete="off" value="{{d.pc_sort}}"
      onchange="updateSort('{{d.pc_id}}',this)"
      style="width: 50px;border-color: #999;padding-left: 0;text-align: center;height: 27px;">
  </div>
</script>
<script>
  var layer
  var uploadLayer
  var $
  var tableIns
  var form
  var table
  // var deleteAllInsTop
  // 按钮pc_delete_all  路由pcdeleteall
  // TODO:头部批量删除
  // 操作中的删除按钮
  function pc_delete_all() {
    var checkStatus = table.checkStatus('goods_classify_list');
    var ids
    if (checkStatus.data.length > 0) {
      // 选中大于1
      var idsArray = [];
      for (var i = 0; i < checkStatus.data.length; i++) {
        idsArray.push(checkStatus.data[i].pc_id);
      }
      ids = idsArray.toString();
      // layui.layer.alert(ids);

      var deleteAllInsTop = layer.confirm('您确认要将选中的全部删除么', {
        btn: ['删除', '取消'],
      }, function (index, layero) {
        $.ajax({
          type: 'get',
          data: {
            ids
          },
          dataType: 'JSON',
          url: '/admin/goods/pcdeleteall',
          success: (res) => {
            if (res.code == 1) {
              layer.msg(res.msg)
              tableIns.reload()
              layer.close(deleteAllInsTop)
            }
          }
        })
      }, function (index) {
        //按钮【按钮二】的回调
      });

      // $(".layui-form-checked").not('.header').parents('tr').remove();
    } else {
      layui.layer.alert("请至少选择一行");
    }
  }







  // 添加分类
  function pc_add() {
    uploadLayer = layer.open({
      type: 1,
      title: '添加轮播',
      content: $('#pc_add_out')
    })
  }
  // 操作中的删除按钮

  function deletePC(id) {
    var deleteIns = layer.confirm('您确认要删除么', {
      btn: ['删除', '取消'],
    }, function (index, layero) {
      //按钮【按钮一】的回调
      $.ajax({
        type: 'get',
        url: `/admin/goods/pcdelete?id=${id}`,
        dataType: 'json',
        success: (res) => {
          if (res.code == 1) {
            // 删除成功
            // 把弹出框关掉
            layer.msg(res.msg)
            tableIns.reload()
            layyer.close(deleteIns)
          }
          // 弹出提示
          layer.msg(res.msg)
        }
      })
    }, function (index) {
      //按钮【按钮二】的回调

    });
  }

  // 操作中的修改按钮
  function updateAllPC(id) {
    $.ajax({
      type: 'get',
      url: `/admin/goods/updateall?id=${id}`,
      success: (res) => {
        // console.log(res.data);//{pc_id: 1, pc_name: '人工智能', pc_sort: 1, is_delete: 0}
        $('#update_pc_id').val(res.data.pc_id)
        $('#update_pc_name').val(res.data.pc_name)
        $('#update_pc_sort').val(res.data.pc_sort)
        // 弹出
        var update_out = layer.open({
          type: 1,
          area: '400px',
          title: '修改轮播图信息',
          content: $('#pc_change_out')
        })


        form.on('submit(pcUpdateForm)', (data) => {
          $.ajax({
            url: '/admin/goods/updateall',
            type: 'post',
            data: data.field,
            dataType: 'json',
            success: (res) => {
              if (res.code == 1) {
                // 修改成功
                layer.close(update_out)
                tableIns.reload()
              }
              layer.msg(res.msg)
            }
          })
        })




      }
    })

  }

  // updateSort  更新排序
  function updateSort(id, obj) {
    $.get(`/admin/goods/pcupdate?id=${id}&pc_sort=${obj.value}`, (res) => {
      if (res.code == 0) {
        tableIns.reload()
      }
      layer.msg(res.msg)
    })
  }

  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  layui.use(['element', 'layer', 'util', 'table', 'form', 'jquery'], function () {
    // var element = layui.element,
    //   layer = layui.layer,
    //   util = layui.util,
    //   $ = layui.$;
    var {
      // table,
      element,
      util,
      // $,
      // form
    } = layui
    table = layui.table
    layer = layui.layer
    $ = layui.$
    form = layui.form
    tableIns = table.render({
      elem: '#goods_classify_list',
      url: '/admin/goods/goodsclassify',
      cols: [
        [{
          field: 'pc_checked',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'pc_id',
          title: 'ID',
          width: '20%',
          sort: true,
        }, {
          field: 'pc_name',
          title: '轮播图名称',
          width: '20%',
        }, {
          field: 'pc_sort',
          title: '轮播图排序',
          sort: true,
          width: '20%',
          templet: '#banner_sort_list'
        }, {
          field: 'experience',
          title: '操作',
          width: '35%',
          templet: '#operation',
          fixed: 'right'
        }]
      ],
      loading: true,
      toolbar: '#banner_list_top',
      title: '商品分类详情表',
      // totalRow: true,
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 10
    })

    // 查询
    form.on('submit(search)', function (data) {
      tableIns.reload({
        where: { //设定异步数据接口的额外参数，任意设
          search: data.field.search,
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })

    // 查询
    form.on('submit(pcAddForm)', function (data) {
      $.ajax({
        type: 'post',
        data: data.field,
        url: '/admin/goods/addpc',
        success: res => {
          if (res.code == 1) {
            layer.close('uploadLayer')
            tableIns.reload()
          }
          layer.msg(res.msg)
        }
      })
    })


    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
</script>